$(function() {
	renderConstructionPage()

	$('.table-warp').on('click', '.bootstrap-table .fixed-table-container .table h6', function() {
		if ($(this).hasClass('total')) {
			console.log($(this).context.dataset.name)
			$('.mask').show()
			getTotalDetailData()
		}
	})
	$('.mask .mask-content .title img').click(function() {
		$('.mask').hide()
	})
})

function renderConstructionPage() {
	getStatistics()
	getCostChartData()
	renderUnitReceive()
	renderQuarterSubject()

}
const rateparams = {
	username: getUsername,
	xm01: fullTaskNumber,
	status: 2,
	chartPage: 80802
}

function getStatistics() {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01: fullTaskNumber,
	// 	chartNo: 1
	// }, function(res) {
	// 	const re = eval("(" + res + ")").items[0].charts[0].data[0];
	// 	$('.container .wrapper .statistics').html(`<div class="box">
	// 						<div class="left">
	// 							<p>计划支出</p>
	// 							<h3>${re.key01}<span>万元</span></h3>
	// 						</div>
	// 					</div>
	// 					<div class="box">
	// 						<div class="left">
	// 							<p>实际支出</p>
	// 							<h3>${re.key02}<span>万元</span></h3>
	// 						</div>
	// 					</div>
	// 					<div class="box">
	// 						<div class="left">
	// 							<p>完成率</p>
	// 							<h3>${re.key03}%<span></span></h3>
	// 						</div>
	// 						<div class="pie">
	// 							<svg><circle cx="20" cy="20" r="16" stroke="#F0B828"  stroke-width="8" fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" /><circle cx="20" cy="20" r="16"  stroke="${ re.key03>100?'red':'#E5E6EB'}" stroke-width="8" fill="none" stroke-dasharray="${Math.PI * 32}" stroke-dashoffset="${Math.PI * 32 * ( re.key03>100?0: re.key03/100)}"  /></svg>
	// 						</div>
	// 					</div>`)
	// })
	const re = {
		"key01": "302439.9",
		"key02": "155299.02",
		"key03": "51.35"
	}
	$('.container .wrapper .statistics').html(`<div class="box">
						<div class="left">
							<p>计划支出</p>
							<h3>${re.key01}<span>万元</span></h3>
						</div>
					</div>
					<div class="box">
						<div class="left">
							<p>实际支出</p>
							<h3>${re.key02}<span>万元</span></h3>
						</div>
					</div>
					<div class="box">
						<div class="left">
							<p>完成率</p>
							<h3>${re.key03}%<span></span></h3>
						</div>
						<div class="pie">
							<svg><circle cx="20" cy="20" r="16" stroke="#F0B828"  stroke-width="8" fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" /><circle cx="20" cy="20" r="16"  stroke="${ re.key03>100?'red':'#E5E6EB'}" stroke-width="8" fill="none" stroke-dasharray="${Math.PI * 32}" stroke-dashoffset="${Math.PI * 32 * ( re.key03>100?0: re.key03/100)}"  /></svg>
						</div>
					</div>`)
}

function renderUnitReceive() {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01: fullTaskNumber,
	// 	chartNo: 4
	// }, function(res) {
	// 	const resp = eval("(" + res + ")").items[0].charts[0];
	// 	const name = chart_name(resp.chart_name, ' ').splice(2);
	// 	renderPieChart('chart3', resp, name)
	// 	let items = '';
	// 	for (const item of resp.data) {
	// 		items += `<div class="item">
	// 									<p>${item.key01}</p>
	// 									<h4>${item.key03}%</h4>
	// 								</div>`
	// 	}
	// 	$('.container .chart-bar .bars').html(items)
	// })
	const resp = {
		"chart_no": "4",
		"chart_name": "收入-单位到款{参数：xm01-任务编号;返回值：key01-类型；key02-金额；key03-百分比}",
		"key_count": "3",
		"data": [{
			"key01": "建安工程",
			"key02": "4.2866",
			"key03": "16.0"
		}, {
			"key01": "工艺设备",
			"key02": "11.2433",
			"key03": "42.0"
		}, {
			"key01": "工程设备",
			"key02": "11.2433",
			"key03": "42.0"
		}]
	};
	const name = chart_name(resp.chart_name, ' ').splice(2);
	renderPieChart('chart3', resp, name)
	let items = '';
	for (const item of resp.data) {
		items += `<div class="item">
									<p>${item.key01}</p>
									<h4>${item.key03}%</h4>
								</div>`
	}
	$('.container .chart-bar .bars').html(items)
}

function renderPieChart(elId, data) {
	noData(elId, data)
	const seriesData = [{
		name: '',
		type: 'pie',
		radius: '70%',
		itemStyle: {
			borderColor: '#fff',
			borderWidth: 2
		},
		labelLine: {
			show: false
		},
		label: {
			show: false
		},
		data: []
	}]
	for (const item of data.data) {
		seriesData[0].data.push({
			value: item.key02,
			name: item.key01
		})
	}

	have(elId) ? pieChart1(elId, seriesData, function(item) {
		handleClickItem(item.data.name)
	}) : ''
}

function getCostChartData() {
	let resp = {
		data: [{
			key01: "部门1",
			key02: "830.89",
			key03: "400.23",
			key04: "84.32"
		}, {
			key01: "部门2",
			key02: "600.89",
			key03: "740.23",
			key04: "44.32"
		}, {
			key01: "部门3",
			key02: "700.89",
			key03: "320.23",
			key04: "54.32"
		}, {
			key01: "部门4",
			key02: "900.89",
			key03: "400.23",
			key04: "23.32"
		}, {
			key01: "其他",
			key02: "890.89",
			key03: "320.23",
			key04: "34.32"
		}]
	}
	renderChart('chart1', resp, ['预算金额', '执行金额', '执行率'])
}

function renderChart(elId, data, legends) {
	noData(elId, data)
	let colors = ['#FDF4BF', '#F7BA1E', '#CC9213']
	const legendData = legends
	let xData = [];
	for (let i = 0; i < data.data.length; i++) {
		xData.push(data.data[i].key01);
	}
	const Data = [];
	for (let i = 0; i < legendData.length; i++) {
		Data.push({
			name: legendData[i],
			type: legendData[i].indexOf('率') > -1 || legendData[i].indexOf('例') > -1 ? "line" : "bar",
			barWidth: '30%',
			barGap: 0,
			yAxisIndex: legendData[i].indexOf('率') > -1 || legendData[i].indexOf('例') > -1 ? 1 : 0,
			symbol: legendData[i].indexOf('率') > -1 || legendData[i].indexOf('例') > -1 ? 'none' : 'rect',
			itemStyle: {
				color: legendData.length > 1 ? colors[i] : colors[1],
			},
			smooth: true,
			data: [],
		})

		for (const item of data.data) {
			Data[i].data.push(item['key0' + (i + 2)])
		}
	}
	have(elId) ? mulitYBar1(elId, xData, legendData, Data, '', '万元', '%', true, (legendData
		.length > 1)) : "";
}

function renderQuarterSubject() {
	// $.get(`${API_URL}getdata`, {
	// 	username: getUsername,
	// 	status: 2,
	// 	chartPage: 80803,
	// 	xm01: '',
	// 	xm02: fullYear,
	// 	chartNo: 4
	// }, function(res) {
	// 	console.log(res)
	// 	const resp = eval("(" + res + ")").items[0].charts[0];
	// 	const name = resp.data.length > 0 ? resp.data[0].key02.split(',') : []
	// 	getTableData(resp.data)
	// })
	const resp = {
		"chart_no": "4",
		"chart_name": "支出-季度科目费用{参数：xm01-任务编号；xm02-年份；返回值：key01-季度；key02-科目名称；key03-金额}",
		"key_count": "3",
		"data": [{
			"key01": "一季度",
			"key02": "事务费",
			"key03": "2024-01-23"
		}, {
			"key01": "二季度",
			"key02": "事务费",
			"key03": "2024-01-23"
		}, {
			"key01": "三季度",
			"key02": "事务费",
			"key03": "651.3"
		}, {
			"key01": "四季度",
			"key02": "事务费",
			"key03": "340.87"
		}, {
			"key01": "四季度",
			"key02": "事务费",
			"key03": "100000"
		}]
	};
	const name = resp.data.length > 0 ? resp.data[0].key02.split(',') : []
	getTableData(resp.data)
}

function getTableData(data) {
	if (data.length === 0 || !data[0]) {
		renderTable1([], [])
		return
	}
	const firstColumns = data[0].key02.split(',')
	let newData = firstColumns.map(it => ({
		key01: it,
		key02: 0
	}))
	for (let i = 0; i < data.length; i++) {
		for (let j = 0; j < newData.length; j++) {
			newData[j]['key02'] += +data[i].key03.split(',')[j]
			newData[j]['key0' + (i + 3)] = data[i].key03.split(',')[j]
		}
	}
	console.log(newData)
	// const thead = data.map(it => it.key01)
	const thead = ['开始时间', '结束时间', '面积', '设备','总投资']
	renderTable1(newData, thead)
}

function renderTable1(data, thead) {
	const columns = [];
	columns[0] = thead.map((it, i) => ({
		field: 'key0' + (i + 3),
		title: it,
		align: 'right',
		valign: 'middle',
		width: 100,
		formatter: function(value,data){
			if(it === '总投资'){
				return `<h6 class="total" data-name=${data.key01}>${value}</h6>`
			}
			return wyText(value)
		}
	}))
	columns[0].unshift({
		field: 'key01',
		title: '项目名称',
		align: 'left',
		width: 100,
		valign: 'middle',
		formatter: blodText
	})
	// columns[0].push({
	// 	field: 'key02',
	// 	title: '总投资',
	// 	align: 'right',
	// 	width: 100,
	// 	valign: 'middle',
	// 	formatter: function(value, data) {
	// 		return `<h6 class="total" data-name=${data.key01}>${value.toFixed(2)}</h6>`
	// 	}
	// })
	renderTable('table1', data, columns, false)
}


function getTotalDetailData() {
	const resp = {
		data: [{
			key01: "安全生产处",
			key02: "100000",
			key03: "95000",
			key04: ".95",
			key05: "67000",
			key06: "62000",
			key07: "2015年",
			key08: "62000",
			key09: "2015年",
			key10: "62000",
			key11: "2015年"
		}, {
			key01: "一事业部",
			key02: "54000",
			key03: "69000",
			key04: "1.278",
			key05: "70000",
			key06: "33000",
			key07: "2016年",
			key08: "62000",
			key09: "2015年",
			key10: "62000",
			key11: "2015年"
		}, {
			key01: "科技处",
			key02: "50000",
			key03: "20000",
			key04: ".4",
			key05: "70000",
			key06: "60000",
			key07: "2017年",
			key08: "62000",
			key09: "2015年",
			key10: "62000",
			key11: "2015年"
		}]
	}
	renderTable2(resp.data)
}

function renderTable2(data) {
	const columns = [
		[{
				field: 'key01',
				title: '费用名称',
				align: 'left',
				rowspan: 2,
				valign: 'middle',
				formatter: blodText
			},
			{
				title: '2021',
				colspan: 2,
				align: 'center',
				valign: 'middle',
			},
			{
				title: '2022',
				colspan: 2,
				align: 'center',
				valign: 'middle',
			},
			{
				title: '2023',
				colspan: 2,
				align: 'center',
				valign: 'middle',
			},
			{
				title: '2024',
				colspan: 2,
				align: 'center',
				valign: 'middle',
			},
			{
				title: '2025',
				colspan: 2,
				align: 'center',
				valign: 'middle',
			}
		],
		[{
				field: 'key02',
				title: '预算',
				align: 'right',
				formatter: wyText,
			},
			{
				field: 'key03',
				title: '支出',
				align: 'right',
				formatter: wyText
			},
			{
				field: 'key04',
				title: '预算',
				align: 'right',
				formatter: wyText,
			},
			{
				field: 'key05',
				title: '支出',
				align: 'right',
				formatter: wyText
			},
			{
				field: 'key06',
				title: '预算',
				align: 'right',
				formatter: wyText,
			},
			{
				field: 'key07',
				title: '支出',
				align: 'right',
				formatter: wyText
			},
			{
				field: 'key08',
				title: '预算',
				align: 'right',
				formatter: wyText,
			},
			{
				field: 'key09',
				title: '支出',
				align: 'right',
				formatter: wyText
			},
			{
				field: 'key10',
				title: '预算',
				align: 'right',
				formatter: wyText,
			},
			{
				field: 'key11',
				title: '支出',
				align: 'right',
				formatter: wyText
			}
		]
	]
	renderTable('table2', data, columns, false)
}